
$(document).ready(function(){
	const pcc = document.getElementById("#pcc").value().split("-");

	const p = document.getElementById("#province");
	const c = document.getElementById("#city");

	let aArr, bArr;

	fetch("common/area").then(r => r.json()).then(data=>{console.log(data);aArr=data})
    
	// $.ajax({
	// 	async: false,
	// 	url: "common/area",
	// 	success: function(area) { aArr = area }
	// })
	
	aArr.forEach(e => p.options.add(new Option(e.text, e.id, pcc[0]===e.id, pcc[0]===e.id)));
	
	p.onchange = function () {
	    // $('#city option').not('option:first').remove();
	    // $('#country option').not('option:first').remove();
		Array.from(c.options).slice(1).forEach(option => option.remove());
		Array.from(x.options).slice(1).forEach(option => option.remove());
	    bArr = aArr.find(e => e.id === this.value).children;
	    bArr.forEach(e => c.options.add(new Option(e.text, e.id, pcc[1]===e.id, pcc[1]===e.id)));
	}
	
	if(pcc[0]) p.dispatchEvent(new Event('change'));
})